<template>
  <!-- 筛选客户  -- 反金融欺诈 -->
  <div id="choose">
    <div class="choose-box">
      <template v-for="(a, b) in endData" :key="b">
        <ul class="litem">
          <li v-for="(c, d) in a.data" :key="d">
            <div class="groups" v-if="c.type == 1">
              <div class="close-icon" @click="removeItem(b, d)"></div>
              <div class="words" title="用户属性">用户属性</div>
              <div class="sele-inp">
                <el-select class="sele" v-model="c.term" @change="selectFn($event, b, d)">
                  <el-option value="">请选择</el-option>
                  <el-option v-for="(item, i) in MZData" :value="item.id" :label="item.text" :key="i"
                    :disabled="selectArrs.arr1.includes(item.id) ? true : false">
                    {{ item.text }}
                  </el-option>
                </el-select>
              </div>
              <template v-if="c.mType == 1">
                <div class="sele-inp">
                  <input type="text" class="inp inp2" v-model="c.times" @input="changeNum($event, b, d, 'times', 2, 999)"
                    @blur="clearNoNum(this)" />
                </div>
                <span style="margin-right: 25px;" v-if="c.term == 1">次</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 2">小时</span>
              </template>
              <template v-if="c.mType == 2">
                <!-- 大于、小于、等于 -->
                <div class="sele-inp">
                  <el-select class="sele !w-[60px]" v-model="c.rather">
                    <el-option value="">请选择</el-option>
                    <!-- 条件 TJData-->
                    <el-option v-for="(item, i) in TJData" :value="item.id" :label="item.text" :key="i">
                    </el-option>
                  </el-select>
                </div>
                <div class="sele-inp" v-if="c.term == 12">
                  <input type="text" class="inp inp2" v-model="c.times" @input="changeNum($event, b, d, 'times', 2, 30)"
                    @blur="clearNoNum(this)" />
                </div>
                <div class="sele-inp" v-else-if="c.term == 17">
                  <input type="text" class="inp inp2" v-model="c.times" @input="changeNum($event, b, d, 'times', 1, 100)"
                    @blur="clearNoNum(this)" />
                </div>
                <div class="sele-inp" v-else-if="c.term == 10 || c.term == 15">
                  <input type="text" class="inp inp2" v-model="c.times" @input="changeNum($event, b, d, 'times', 1, 1000)"
                    @blur="clearNoNum(this)" />
                </div>
                <div class="sele-inp" v-else>
                  <input type="text" class="inp inp2" v-model="c.times" @input="changeNum($event, b, d, 'times', 2, 120)"
                    @blur="clearNoNum(this)" />
                </div>
                <span style="margin-right: 25px;" v-if="c.term == 4">岁</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 10 || c.term == 15">万元</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 17">%</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 18">年</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 12">期</span>
                且&nbsp;&nbsp;
                <div class="sele-inp">
                  <el-select class="sele !w-[60px]" v-model="c.rather2">
                    <el-option value="">请选择</el-option>
                    <!-- 条件 TJData-->
                    <el-option v-for="(item, i) in TJData" :value="item.id" :label="item.text" :key="i">
                    </el-option>
                  </el-select>
                </div>
                <div class="sele-inp" v-if="c.term == 12">
                  <input type="text" class="inp inp2" v-model="c.times2" @input="changeNum($event, b, d, 'times2', 2, 30)"
                    @blur="clearNoNum(this)" />
                </div>
                <div class="sele-inp" v-else-if="c.term == 17">
                  <input type="text" class="inp inp2" v-model="c.times2"
                    @input="changeNum($event, b, d, 'times2', 1, 100)" @blur="clearNoNum(this)" />
                </div>
                <div class="sele-inp" v-else-if="c.term == 10 || c.term == 15">
                  <input type="text" class="inp inp2" v-model="c.times2"
                    @input="changeNum($event, b, d, 'times2', 1, 1000)" @blur="clearNoNum(this)" />
                </div>
                <div class="sele-inp" v-else>
                  <input type="text" class="inp inp2" v-model="c.times2"
                    @input="changeNum($event, b, d, 'times2', 2, 120)" @blur="clearNoNum(this)" />
                </div>
                <span style="margin-right: 25px;" v-if="c.term == 4">岁</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 10 || c.term == 15">万元</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 17">%</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 18">年</span>
                <span style="margin-right: 25px;" v-else-if="c.term == 12">期</span>
              </template>
              <template v-if="c.mType == 3">
                <!-- 包含、不包含 -->
                <div class="sele-inp">
                  <el-select class="sele !w-[60px]" v-model="c.rather">
                    <el-option value="">请选择</el-option>
                    <!-- 条件 BHData-->
                    <el-option v-for="(item, i) in BHData" :value="item.id" :label="item.text" :key="i">
                    </el-option>
                  </el-select>
                </div>

                <div class="sele-inp">
                  <div class="sele-posi">
                    <!-- <input type="text" class="inp" v-model="c.el-selectMore" :title="c.el-selectMore"
                      @click="el-selectShow($event, b, d)" readonly />
                    <el-select class="sele" multiple v-model="c.times" v-if="c.isSelect" @change="el-selectFn2($event, b, d)"
                      :style="{ 'height': selData[c.mName].length > 5 ? '200px' : '110px' }">
                      <el-option value="" disabled>按住ctrl或shift进行多选
                      </el-option>
                      <el-option v-for="(item, i) in selData[c.mName]" :value="item.id" :key="i">
                        {{ item.text }}
                      </el-option>
                    </el-select> -->
                    <el-select class="sele !w-[150px]" multiple v-model="c.selectMore" collapse-tags>
                      <el-option v-for="(item, i) in selData[c.mName]" :value="item.text" :key="i" :title="item.text"
                        :label="item.text" />
                    </el-select>
                    <div class="sele-mask" v-if="c.isSelect" @click="c.isSelect = !c.isSelect"></div>
                  </div>
                </div>
                <span style="margin-right: 25px;"></span>
              </template>

            </div>
            <div class="groups" v-else-if="c.type == 2">
              <div class="close-icon" @click="removeItem(b, d)"></div>
              <div class="words" title="风险属性">风险属性</div>
              <div class="sele-inp">
                <el-select class="sele" v-model="c.term" @change="selectFnA($event, b, d)">
                  <el-option value="">请选择一个事件</el-option>
                  <!-- 事件 DZData-->
                  <el-option v-for="(item, i) in DZData" :key="i" :value="item.id" :label="item.text"
                    :disabled="selectArrs.arr2.includes(item.id) ? true : false">
                  </el-option>
                </el-select>
              </div>
              <template v-if="c.term">
                <template v-if="c.mType == 2">
                  <div class="sele-inp" v-if="c.term == '2' || c.term == '3'">
                    <el-select class="sele " v-model="c.daily">
                      <el-option value="">请选择</el-option>
                      <el-option v-for="(item, i) in selData2[c.mName]" :value="item.id" :label="item.text" :key="i">
                      </el-option>
                    </el-select>
                  </div>

                  <div class="sele-inp" v-if="!(c.term == '2' || c.term == '3')">
                    <el-select class="sele !w-[60px]" v-model="c.rather">
                      <el-option value="">请选择</el-option>
                      <!-- 条件 TJData-->
                      <el-option v-for="(item, i) in TJData" :value="item.id" :label="item.text" :key="i">
                      </el-option>
                    </el-select>
                  </div>
                  <template v-if="c.term == 22">
                    <div class="sele-inp">
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 100000000)" @blur="clearNoNum(this)" />
                    </div>
                    <span style="margin-right: 25px;">元</span>
                  </template>
                  <template v-else-if="c.term == 24">
                    <div class="sele-inp">
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 999)" @blur="clearNoNum(this)" />
                    </div>
                    <span style="margin-right: 25px;">次</span>
                  </template>
                  <template v-else-if="c.term == 24">
                    <div class="sele-inp">
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 100)" @blur="clearNoNum(this)" />
                    </div>
                    <span style="margin-right: 25px;" v-if="c.term == 24">%</span>
                    <span style="margin-right: 25px;" v-else>个</span>
                  </template>
                  <template v-else-if="c.term == 24">
                    <div class="sele-inp">
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 999)" @blur="clearNoNum(this)" />
                    </div>
                    <span style="margin-right: 25px;" v-if="c.term == 17">次</span>
                    <span style="margin-right: 25px;" v-else>个</span>
                  </template>
                  <template v-else-if="c.term == 24">
                    <div class="sele-inp" v-if="c.term == 18 || c.term == 19 || c.term == 20">
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 100000)" @blur="clearNoNum(this)" />
                    </div>
                    <div class="sele-inp" v-else>
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 10000)" @blur="clearNoNum(this)" />
                    </div>
                    <span style="margin-right: 25px;">个</span>
                  </template>
                  <template v-else-if="c.term">
                    <div class="sele-inp">
                      <input type="text" class="inp inp2" v-model="c.times"
                        @input="changeNum($event, b, d, 'times', 2, 999)" @blur="clearNoNum(this)" />
                    </div>
                    <span style="margin-right: 25px;">次</span>
                  </template>
                  <template v-if="c.term">
                    且&nbsp;&nbsp;
                    <div class="sele-inp">
                      <el-select class="sele !w-[60px]" v-model="c.rather2">
                        <el-option value="">请选择</el-option>
                        <!-- 条件 TJData-->
                        <el-option v-for="(item, i) in TJData" :value="item.id" :label="item.text" :key="i">
                        </el-option>
                      </el-select>
                    </div>
                    <template v-if="c.term == 24">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 100000000)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">元</span>
                    </template>
                    <template v-else-if="c.term">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 999)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">次</span>
                    </template>
                    <template v-else-if="c.term == 24">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 999)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">次</span>
                    </template>
                    <template v-else-if="c.term == 24">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 100)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;" v-if="c.term == 24">%</span>
                      <span style="margin-right: 25px;" v-else>个</span>
                    </template>
                    <template v-else-if="c.term == 24">
                      <div class="sele-inp">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 999)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;" v-if="c.term == 17">次</span>
                      <span style="margin-right: 25px;" v-else>个</span>
                    </template>
                    <template v-else>
                      <div class="sele-inp" v-if="c.term == 18 || c.term == 19 || c.term == 20">
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 100000)" @blur="clearNoNum(this)" />
                      </div>
                      <div class="sele-inp" v-else>
                        <input type="text" class="inp inp2" v-model="c.times2"
                          @input="changeNum($event, b, d, 'times2', 2, 10000)" @blur="clearNoNum(this)" />
                      </div>
                      <span style="margin-right: 25px;">个</span>
                    </template>
                  </template>
                </template>
                <template v-if="c.mType == 3">
                  <!-- 包含、不包含 -->
                  <div class="sele-inp">
                    <el-select class="sele !w-[60px]" v-model="c.rather">
                      <el-option value="">请选择</el-option>
                      <!-- 条件 BHData-->
                      <el-option v-for="(item, i) in BHData" :value="item.id" :label="item.text" :key="i">
                      </el-option>
                    </el-select>
                  </div>
                  <div class="sele-inp" v-if="c.mType == 3">
                    <div class="sele-posi">
                      <!-- <input type="text" class="inp" v-model="c.el-selectMore" :title="c.el-selectMore"
                        @click="el-selectShow($event, b, d)" readonly />
                      <el-select class="sele" multiple v-model="c.times" v-if="c.isSelect" @change="el-selectFn2($event, b, d)"
                        :style="{ 'height': selData2[c.mName].length > 5 ? '200px' : '110px' }">
                        <el-option value="" disabled>按住ctrl或shift进行多选
                        </el-option>
                        <el-option v-for="(item, i) in selData2[c.mName]" :value="item.id" :key="i">
                          {{ item.text }}
                        </el-option>
                      </el-select> -->
                      <el-select class="sele !w-[150px]" multiple v-model="c.selectMore" collapse-tags>
                        <el-option v-for="(item, i) in selData2[c.mName]" :value="item.text" :key="i" :title="item.text"
                          :label="item.text" />
                      </el-select>
                      <div class="sele-mask" v-if="c.isSelect" @click="c.isSelect = !c.isSelect">
                      </div>
                    </div>
                  </div>
                  <span style="margin-right: 25px;"></span>
                </template>
              </template>
            </div>
            <div class="leb-groups">
              <span v-if="d < 2">或者</span>
              <div class="btn-list" v-if="d == a.data.length - 1 && a.data.length < 3">
                <!-- 点击新增的按钮 CZData-->
                <button v-for="(item, i) in CZData" @click="addItem(item.id, b, d)">{{ item.text }}</button>
              </div>
            </div>
          </li>
        </ul>
        <div class="lebs">
          <span v-if="b < 7">并且</span>
          <div class="btn-list" v-if="b == endData.length - 1 && endData.length < 8">
            <!-- 点击新增的按钮 CZData-->
            <button v-for="(item, i) in CZData" @click="addItem(item.id, b)">{{ item.text }}</button>
          </div>
        </div>
      </template>
      <div class="lebs">
        <div class="btn-list" v-if="endData.length == 0">
          <!-- 点击新增的按钮 CZData-->
          <button v-for="(item, i) in CZData" @click="addItem(item.id, b)">{{ item.text }}</button>
        </div>
      </div>
    </div>
    <div class="choose-foot" v-if="props.btnstate">
      <button type="button" class="btn-white" @click="clearChoose()">取消</button>
      <button type="button" class="btn-def" @click="setChoose()">确定</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { usescreen } from "./hooks"
const props = defineProps({
  btnstate: {
    type: Boolean,
    default: true
  },
  rowdata: {
    default: []
  }
})
const {
  DZData,
  MZData,
  TJData,
  BHData,
  CZData,
  selData,
  selData2,
  states,
  endData,
  mType,
  selectArrs,
  selectFn,
  selectFn2,
  selectFnA,
  selectShow,
  addItem,
  removeItem,
  setChoose,
  clearChoose,
  clearNoNum,
  changeNum
} = usescreen(props)
</script>

<style scoped>
@import url(@/style/choose.css);
</style>
